<template>
  <div class="menuPage">
      <div class="addMenuBox">
        <!-- <el-button type="primary">新增</el-button> -->
      </div>
      <div class="menuTableBox">
        <el-table
          :data="menuList"
          style="width: 100%"
          row-key="id"
          border
          lazy
          :load="load"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="menuName" label="菜单名称" >
          </el-table-column>
          <el-table-column prop="createUser" label="姓名"  align="center">
          </el-table-column>
          <el-table-column  label="创建日期" align="center">
            <template slot-scope="scope">{{ scope.row.createTime | timeFormat }}</template>
          </el-table-column>
        <!-- <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            class="btn-sz"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            icon="el-icon-delete"
            class="red btn-sz"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column> -->
        </el-table>
      </div>
  </div>
</template>

<script>
import { commonMenuList, commonMenuListByPid } from "../../../service/common";
export default {
  data() {
    return {
      queryInfo: {
        pagenum: 1,
        pagesize: 5,
      },
      menuList: [],
    };
  },
  created() {
    this.getMenuList();
  },
  methods: {
    async getMenuList() {
      const res = await commonMenuList(this.queryInfo);
      console.log(res, "菜单列表res");
      if (res.code == '200') {
        res.sysUsers.forEach(item => {
          item['hasChildren'] = true
          return item
        })
        this.menuList = res.sysUsers
        console.log( this.menuList ,' this.menuList ')
      }
    },
    async load(tree, treeNode, resolve) {
      const res = await commonMenuListByPid({id:tree.id})
      console.log(res,'子节点res')
      resolve(res.sysUsers)
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
          type: 'warning'
      })
      .then(() => {
          this.$message.success('删除成功');
          console.log(this.list,'this.tableData1')
          this.list.splice(index, 1);
      })
      .catch(() => {});
    },
  },
};
</script>
<style lang="less" scoped>
.menuPage {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  padding-top: 15px;
  padding-left: 20px;
  background-color: #fff;

  .addMenuBox {
    height: 10px;
    padding: 5px 0 20px 0;
  }

  .menuTableBox {
    .btn-sz {
      font-size: 12px;
    } 
    .pagination {
      margin: 30px 0;
      text-align: right;
    }
  }
}
</style>